<template>
    <div class="distribution flexv">
        <!-- 头部 -->
        <pubHead title="分销中心" isBorder="false" bgColor="#58b228" leftColor="#fff" titleColor="#fff"></pubHead>

        <!-- 用户信息 -->
        <div class="dis_info jus-b ali-c">

            <div class="info_left flex">
                <div class="info_img flex">
                    <img :src="myInfo.avatar" alt="">
                </div>

                <div class="flex1 info_info flexv jus-c">
                    <p class="name white oneline">{{myInfo.nickname}}</p>
					<p class="level white" v-if="myInfo.distributor==0">普通会员</p>
                    <p class="level white" v-if="myInfo.distributor==1 && myInfo.distributor_name == 0">普通分销商</p>
					<p class="level white" v-if="myInfo.distributor==2">旅游达人</p>
					<p class="level white" v-if="myInfo.distributor==3">省级代理</p>
					<p class="level white" v-if="myInfo.distributor==4">市级代理</p>
					<p class="level white" v-if="myInfo.distributor==5">县级代理</p>
                    <span class="level white" v-if="myInfo.distributor != 0 && myInfo.distributor_name != '0'">{{myInfo.distributor_name}}</span>
                    <p class="invite white">{{myInfo.total_num}}人</p>
                </div>
            </div>

            <div class="info_right flexv jus-c">
                <p class="price white tc">￥{{myInfo.balance}}</p>
                <p class="cash white tc">可提现佣金（元）</p>
                <p class="cashBtn white tc" @click="toDetail(5)">立即提现</p>
            </div>
        </div>

        <!-- 收益信息 -->
        <div class="earn flex">
            <div class="item flex1 flexv ali-c">
                <p class="price">{{myInfo.total_balance}}</p>
                <p class="note">我的佣金(元)</p>
            </div>
            <div class="item flex1 flexv ali-c">
                <p class="price">{{myInfo.withdrawal_balance | toFix_2}}</p>
                <p class="note">已提现佣金(元)</p>
            </div>
        </div>

        <!-- 栏目 -->
        <div class="items flex-wrap">
            <div class="item flexv flexc" @click="toDetail(1)">
                <img src="@/assets/me_fx_team_z.png" class="team" alt="">
                <p class="tc">我的团队</p>
            </div>
            <div class="item flexv flexc" @click="toDetail(2)">
                <img src="@/assets/me_fx_share_z.png" class="invite" alt="">
                <p class="tc">邀请好友</p>
            </div>
            <div class="item flexv flexc" @click="toDetail(3)">
                <img src="@/assets/me_fx_order_z.png" class="order" alt="">
                <p class="tc">分销订单</p>
            </div>
            <div class="item flexv flexc" @click="toDetail(4)">
                <img src="@/assets/me_fx_statistics_z.png" class="detail" alt="">
                <p class="tc">佣金明细</p>
            </div>
            <div class="item flexv flexc" @click="toDetail(5)">
                <img src="@/assets/my_cash_withdrawal_z.png" class="cash" alt="">
                <p class="tc">我要提现</p>
            </div>
			<div class="item flexv flexc" @click="toDetail(6)">
			    <img src="@/assets/rule.png" class="cash" alt="">
			    <p class="tc">分销规则</p>
			</div>
        </div>

    </div>
</template>
<script>
import Vue from 'vue';
import pubHead from '@/components/head';
import { Toast, Dialog } from 'vant';
import { disCenter } from '@/request/api';

Vue.use(Toast )
export default {
    data(){
        return{
			myInfo:{}
        }
    },
    components: {
        pubHead,
    },
    created(){
        this.getData();
    },
    methods: {
        // 获取数据
        getData(){
			let that = this
			this.$loading();
			disCenter({
				token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
			}).then(res =>{
				Toast.clear();
				that.myInfo = res.data
			})
        },
        // 栏目跳转
        toDetail(id){
            switch (id){
                case 1:
                    this.$router.push('/team');
                    break
                case 2:
					let arr = this.myInfo
                    this.$router.push({name: 'Invite',params:arr});
                    break
                case 3:
                    this.$router.push('/disOrder');
                    break
                case 4:
                    this.$router.push('/earnDetail');
                    break
                case 5:
                    this.$router.push('/cash');
					break
				case 6:
					this.$router.push('/rules');
            }
        }
    },
	filters:{
		toFix_2(value){
			value = Number(value)
			return value.toFixed(2)
		}
	}
}
</script>
<style lang="less" scoped>
.distribution{
    min-height: 100vh;
    background-color: #f5f5f5;
    // 头部信息
    .dis_info{
        height: 2.66rem;
        padding: 0 0.3rem;
        background: url('~@/assets/me_fx_bg.png') no-repeat center;
        background-size: 100% 100%;
        .info_left{
            .info_img{
                width: 1.4rem;
                height: 1.4rem;
                border-radius: 100%;
                overflow: hidden;
                border: 1px solid #53AB2A;
                img{
                    margin: auto;
                }
            }
            .info_info{
                margin-left: 0.2rem;
                .name{
                    font-size: 0.32rem;
                    font-weight: bold;
                    line-height: 120%;
                }
                .level{
                    margin-top: 0.3rem;
                    padding-left: 0.44rem;
                    font-size: 0.22rem;
                    line-height: 120%;
                    background: url('~@/assets/me_fx_crown_z.png') no-repeat left center;
                    background-size: 0.28rem 0.22rem;
                }
                .invite{
                    margin-top: 0.14rem;
                    padding-left: 0.44rem;
                    font-size: 0.22rem;
                    line-height: 120%;
                    background: url('~@/assets/me_fx_customer_z.png') no-repeat left center;
                    background-size: 0.28rem 0.22rem;
                }
            }
        }
        .info_right{
            margin-left: 0.2rem;
            .price{
                font-size: 0.4rem;
                line-height: 120%;
            }
            .cash{
                margin-top: 0.18rem;
                font-size: 0.24rem;
                line-height: 120%;
            }
            .cashBtn{
                width: 1.5rem;
                height: 0.46rem;
                margin: 0.16rem auto 0;
                border-radius: 0.23rem;
                font-size: 0.24rem;
                line-height: 0.46rem;
                background-color: #EE1C1A;
            }
        }
    }
    // 收益信息
    .earn{
        height: 1.5rem;
        padding: 0.3rem 0;
        border-bottom: 1px solid #e6e6e6;
        background-color: #fff;
        .item{
            .price{
                font-size: 0.38rem;
                line-height: 120%;
                color: #EE1C1A;
            }
            .note{
                margin-top: 0.14rem;
                font-size: 0.24rem;
                line-height: 120%;
                color: #666;
            }
        }
        .item:last-child{
            border-left: 1px solid #e6e6e6;
        }
    }
    // 栏目
    .items{
        background-color: #fff;
        .item{
            width: calc(100% / 3);
            height: 2.16rem;
            border-bottom: 1px solid #e6e6e6;
            border-right: 1px solid #e6e6e6;
            p{
                margin-top: 0.22rem;
                font-size: 0.24rem;
                line-height: 120%;
                color: #333;
            }
            .team{
                width: 0.62rem;
                height: 0.5rem;
            }
            .invite{
                width: 0.52rem;
                height: 0.52rem;
            }
            .order{
                width: 0.42rem;
                height: 0.5rem;
            }
            .detail{
                width: 0.5rem;
                height: 0.48rem;
            }
            .cash{
                width: 0.48rem;
                height: 0.46rem;
            }
        }
        .item:nth-child(3n){
            border-right: none;
        }
    }
}
</style>